<template>
	<div>
		<!-- 登陆 -->
		<form class="form" @submit.prevent="onSubmit">
			<label
				>用户名：
				<input type="text" v-model="username" />
			</label>
			<label>
				密码：
				<input type="password" v-model="password" />
			</label>
			<!-- remember -->
			<label>
				<input type="checkbox" v-model="checked" />remember password
			</label>
			<!-- 选择地域 -->
			<label>
				<select v-model="selected">
					<option
						:value="item.id"
						v-for="(item, index) in seleclist"
						:key="index"
					>
						{{ item.label }}
					</option>
				</select>
			</label>
			<!-- 选择性别 -->
			<section>
				<label>
					<input v-model="sex" type="radio" name="sex" value="1" />
					男
				</label>
				<label>
					<input v-model="sex" type="radio" name="sex" value="2" />
					女
				</label>
			</section>
			<label>
				<button>提交</button>
			</label>
		</form>
	</div>
</template>

<style lang="scss">
.form {
	& > label {
		display: block;
	}
}
</style>

<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			checked: false, // 是否记住密码
			seleclist: [
				{ label: '中国', id: 'cn' },
				{ label: '外国', id: 'en' },
			],
			selected: '', // 下拉选择地区
			sex: '', // 1 男 2 女
		}
	},
	methods: {
		onSubmit() {
			console.log(this.$data)
		},
	},
}
</script>